
// 导入vue包 vue-router vue-resource
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import Vuex from 'vuex';
// 安装路由 使用resource
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(Vuex);

// 配置请求根路径  
// 必须在Vue.use(VueResource) 之后配置,不然访问不到Vue.http
Vue.http.options.root = 'http://www.liulongbin.top:3005';

// 配置post请求 emulateJSON=true
Vue.http.options.emulateJSON = true;

// 导入mui组件css文件
import './lib/mui/css/mui.min.css';
// 购物车图标是extra中的,所以还要引入这个文件
import './lib/mui/css/icons-extra.css'

// 引入缩略图插件
import VuePreview from 'vue-preview';
Vue.use(VuePreview);


// 导入入口vue文件和router
import app from './app.vue';
import router from './router';

// 格式时间moment包
import moment from 'moment';

// 按需导入mint组件 需要依赖一个包 babel-plugin-component
// .babelrc 添加属性
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui';
// // 按需导入 导入的懒加载,没有加载时的图标,所以得全部导入
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload)
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css'

// 全局过滤器
Vue.filter('dataFormate', (data, pattern = "YYYY-MM-DD HH:mm:ss") => {
    return moment(data).format(pattern)
})
// 创建store公共数据管理仓库
// 页面刷新,读取localStorage中的数据
var car = JSON.parse(localStorage.getItem('car')||'[]')
var store = new Vuex.Store({
    state: {
        car: car,
    },
    mutations: {
        addCar(state, data) {
            // 判断如果本来已经存在该商品,就叠加数量
            // some 查找.如果存在,就返回ture,否则返回false
            var flag = state.car.some(item => {
                if (item.id == data.id) {
                    item.count += parseInt(data.count);
                    return true;
                }
            })
            if (!flag) {
                state.car.push(data);
            }
            // 将car中的数据存到localStorage中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        // 修改某个商品的数量
        updateCount(state, data) {
            state.car.some(item => {
                if (item.id == data.id) {
                    item.count = parseInt(data.count)
                    return true
                }
            })
            // 修改后的数据存到localStorage
            localStorage.setItem('car', JSON.stringify(state.car))
        },
        // 删除购物车里某个商品
        del(state, id) {
            state.car.some((item,index) => {
                if (item.id == id) {
                    state.car.splice(index, 1);
                    return true;
                }
            })
            // 修改后的数据存到localStorage
            localStorage.setItem('car', JSON.stringify(state.car))
        },
        // 修改选中状态
        updateSelected(state, info) {
            state.car.some(item => {
                if (item.id == info.id) {
                    item.selected = info.selected;
                    return true
                }
            })
            // 修改后的数据存到localStorage
            localStorage.setItem('car', JSON.stringify(state.car))
        }
    },
    getters: {
        allCount(state) {
            // 总计数量
            var c = 0;
            state.car.forEach(item => {
                c += parseInt(item.count)
            });
            return c;
        },
        // 将每个购物车中的商品的id作为属性名, count作为属性值返回,便于购物车页面获取数量
        getCount(state) {
            var o = {};
            state.car.forEach(item => {
                o[item.id]=item.count
            });
            return o
        },
        getSelected(state) {
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.selected;
            })
            return o;
        },
        // 获取选中的商品的价格和数量
        getSelectedGoods(state) {
            var o = {
                count: 0,
                price:0
            };
            state.car.forEach(item => {
                if (item.selected) {
                    o.count += parseInt(item.count);
                    o.price += parseInt(item.count) * item.price;
                }
            })
            return o;
        }
        
    }
})
var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router,
    store
})